<template>
  <view class="uni-navbar" :class="{'uni-dark':dark, 'uni-nvue-fixed': fixed}">
    <view class="uni-navbar__content" :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" :style="{ 'background-color': themeBgColor, 'border-bottom-color':themeColor }">
      <status-bar v-if="statusBar" />
      <view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}" class="uni-navbar__header">
        <view class="uni-navbar__header-btns uni-navbar__header-btns-left" :style="{width:leftIconWidth}">
          <slot name="left">
            <view class="left-button" :style="{ 'background-color': leftButtonBgColor }">
              <view class="uni-navbar__content_view" v-if="leftIcon.length > 0" :style="{paddingRight:leftButtonMarginRight}">
                <uni-icons :color="themeColor" :type="leftIcon" size="20" />
              </view>
              <view class="uni-navbar__content_view uni-navbar__content_view_right" v-if="leftIcon2.length > 0">
                <uni-icons :color="themeColor" :type="leftIcon2" size="20" />
              </view>
              <button open-type="feedback" :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text" v-if="leftText.length && leftText != 1" style="display: contents;">
                <view  class="uni-nav-bar-btn-text-left0" :style="{ color: themeColor, fontSize: '12px', fontWeight: 'bold', padding: 0 }">
                  {{ leftText }}
                </view>
                <view @click="onClickLeft(2)" class="uni-nav-bar-btn-text-left" v-if="leftText2.length" :style="{ color: themeColor, fontSize: '12px', fontWeight: 'bold' }">
                  {{ leftText2 }}
                </view>
              </button>
            </view>
          </slot>
        </view>
        <view class="uni-navbar__header-container " @tap="onClickTitle">
          <slot>
            <view class="uni-navbar__header-container-inner" v-if="title.length>0">
              <text class="uni-nav-bar-text uni-ellipsis-1" :style="{color: themeTitleColor, fontWeight: 'bold', fontSize: '17px' }">{{ title == 'true' ? '' : title }}</text>
            </view>
          </slot>
        </view>
        <view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right" :style="{width:rightIconWidth}">
          <slot name="right">
            <view v-if="rightIcon.length">
              <uni-icons :color="themeColor" :type="rightIcon" size="22" />
            </view>
            <view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
              <text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
            </view>
          </slot>
        </view>
      </view>
    </view>
    <!-- #ifndef APP-NVUE -->
    <view class="uni-navbar__placeholder" v-if="fixed">
      <status-bar v-if="statusBar" />
      <view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" />
    </view>
    <!-- #endif -->
  </view>
  </template>
  
  <script>
  import statusBar from "./uni-status-bar.vue";
  const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
  
  /**
   * 
   * 
   * NavBar 自定义导航栏
   * @description 导航栏组件，主要用于头部导航
   * @tutorial https://ext.dcloud.net.cn/plugin?id=52
   * @property {Boolean} dark 开启黑暗模式
   * @property {String} title 标题文字
   * @property {String} leftText 左侧按钮文本
   * @property {String} rightText 右侧按钮文本
   * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
   * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
   * @property {String} color 图标和文字颜色
   * @property {String} backgroundColor 导航栏背景颜色
   * @property {Boolean} fixed = [true|false] 是否固定顶部
   * @property {Boolean} statusBar = [true|false] 是否包含状态栏
   * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
   * @property {Boolean} stat 是否开启统计标题上报
   * @event {Function} clickLeft 左侧按钮点击时触发
   * @event {Function} clickRight 右侧按钮点击时触发
   * @event {Function} clickTitle 中间标题点击时触发
   */
  export default {
    name: "UniNavBar",
    components: {
      statusBar
    },
    emits: ['clickLeft', 'clickRight', 'clickTitle'],
    props: {
      dark: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ""
      },
      leftText: {
        type: String,
        default: ""
      },
      leftText2: {
        type: String,
        default: ""
      },
      rightText: {
        type: String,
        default: ""
      },
      leftIcon: {
        type: String,
        default: ""
      },
      leftIcon2: {
        type: String,
        default: ""
      },
      rightIcon: {
        type: String,
        default: ""
      },
      fixed: {
        type: [Boolean, String],
        default: false
      },
      color: {
        type: String,
        default: ""
      },
      titleColor: {
        type: String,
        default: ""
      },
      backgroundColor: {
        type: String,
        default: ""
      },
      leftButtonBgColor: {
        type: String,
        default: ""
      },
      statusBar: {
        type: [Boolean, String],
        default: false
      },
      shadow: {
        type: [Boolean, String],
        default: false
      },
      border: {
        type: [Boolean, String],
        default: true
      },
      height: {
        type: [Number, String],
        default: 44
      },
      leftWidth: {
        type: [Number, String],
        default: 60
      },
      rightWidth: {
        type: [Number, String],
        default: 60
      },
      stat: {
        type: [Boolean, String],
        default: ''
      }
    },
    computed: {
      leftButtonMarginRight(){
        if (this.leftIcon2.length > 0) {
          return '15rpx'
        } else {
          return '0rpx'
        }
      },
      themeBgColor() {
        if (this.dark) {
          // 默认值
          if (this.backgroundColor) {
            return this.backgroundColor
          } else {
            return this.dark ? '#333' : '#FFF'
          }
        }
        return this.backgroundColor || '#FFF'
      },
      themeColor() {
        if (this.dark) {
          // 默认值
          if (this.color) {
            return this.color
          } else {
            return this.dark ? '#fff' : '#333'
          }
        }
        return this.color || '#333'
      },
      themeTitleColor() {
        if (this.dark) {
          // 默认值
          if (this.color) {
            return this.color
          } else {
            return this.dark ? '#fff' : '#333'
          }
        }
        return this.titleColor || this.color || '#333'
      },
      navbarHeight() {
        return getVal(this.height)
      },
      leftIconWidth() {
        return getVal(this.leftWidth)
      },
      rightIconWidth() {
        return getVal(this.rightWidth)
      }
    },
    mounted() {
      if (uni.report && this.stat && this.title !== '') {
        uni.report('title', this.title)
      }
    },
    methods: {
      onClickLeft(num) {
        console.log("onClickLeft", num)
        this.$emit("clickLeft", num);
      },
      onClickRight() {
        this.$emit("clickRight");
      },
      onClickTitle() {
        this.$emit("clickTitle");
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  $nav-height: 44px;
  
  .uni-nvue-fixed {
    /* #ifdef APP-NVUE */
    position: sticky;
    /* #endif */
  }
  
  .setting-btn2 {
    background: rgba(0,0,0,0);
  }
  .uni-navbar-btn-text::after {
    border-radius: 80rpx;
    border:1px solid #d7d7d796;
  }
  
  .uni-navbar {
    // box-sizing: border-box;
  }
  
  .left-button {
    $buton-radius: 80upx;
    border-top-left-radius: $buton-radius;
    border-top-right-radius: $buton-radius;
    border-bottom-left-radius: $buton-radius;
    border-bottom-right-radius: $buton-radius;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 20rpx;
    padding-left: 20rpx;
    height: 32px;
    position: relative;
    background-color: #fcfcfc;
  }
  
  .left-button::before {
    position: absolute;
    $buton-radius: 80upx;
    border-top-left-radius: $buton-radius;
    border-top-right-radius: $buton-radius;
    border-bottom-left-radius: $buton-radius;
    border-bottom-right-radius: $buton-radius;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    content: '';
    /* border: 1upx solid #d7d7d7;*/
  }
  
  .uni-nav-bar-text {
    /* #ifdef APP-PLUS */
    font-size: 34rpx;
    /* #endif */
    /* #ifndef APP-PLUS */
    font-size: 14px;
    /* #endif */
  }
  
  .uni-nav-bar-right-text {
    font-size: 12px;
  }
  
  .uni-nav-bar-btn-text-left {
    padding-left: 15upx;
    position: relative;
    display: inline-block;
  }
  .uni-nav-bar-btn-text-left0{
    padding-right: 15upx;
    display: inline-block;
    position: relative;
  }
  .uni-nav-bar-btn-text-left0::after {
    position: absolute;
    z-index: 3;
    right: 0px;
    bottom: -20px;
    left: -10px;
    top: -20px;
    content: '';
    // border: 1upx solid red;
  }
  .uni-nav-bar-btn-text-left::after {
    position: absolute;
    z-index: 3;
    right: -10px;
    bottom: -20px;
    left: 0px;
    top: -20px;
    content: '';
    // border: 1upx solid red;
  }
  .uni-nav-bar-btn-text-left::before {
    position: absolute;
    // $buton-radius: 80upx;
    // border-top-left-radius: $buton-radius;
    // border-top-right-radius: $buton-radius;
    // border-bottom-left-radius: $buton-radius;
    // border-bottom-right-radius: $buton-radius;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    top: 1px;
    height: 20px;
    content: '';
    border-left: 1upx solid #d7d7d7;
  }
  
  .uni-navbar__content {
    position: relative;
    // background-color: #fff;
    // box-sizing: border-box;
    background-color: transparent;
  }
  
  .uni-navbar__content_view {
    // box-sizing: border-box;
  }
  
  .uni-navbar__content_view_right {
    // box-sizing: border-box;
    padding-left: 20upx;
    display: inline-block;
    position: relative;
  }
  
  .uni-navbar__content_view_right::before {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    top: 8px;
    height: 20px;
    content: '';
    border-left: 1upx solid rgba(215, 215, 215, .3);
  }
  
  .uni-navbar-btn-text {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    line-height: 12px;
  }
  
  .uni-navbar__header {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    padding: 0 10px;
    flex-direction: row;
    height: $nav-height;
    font-size: 12px;
  }
  
  .uni-navbar__header-btns {
    /* #ifndef APP-NVUE */
    overflow: hidden;
    display: flex;
    /* #endif */
    flex-wrap: nowrap;
    flex-direction: row;
    width: 120rpx;
    // padding: 0 6px;
    justify-content: center;
    align-items: center;
    /* #ifdef H5 */
    cursor: pointer;
    /* #endif */
  }
  
  .uni-navbar__header-btns-left {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    width: 120rpx;
    justify-content: flex-start;
    align-items: center;
  }
  
  .uni-navbar__header-btns-right {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    // width: 150rpx;
    // padding-right: 30rpx;
    justify-content: flex-end;
    align-items: center;
  }
  
  .uni-navbar__header-container {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    padding: 0 10px;
    overflow: hidden;
  }
  
  .uni-navbar__header-container-inner {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    overflow: hidden;
    // box-sizing: border-box;
  }
  
  .uni-navbar__placeholder-view {
    height: $nav-height;
  }
  
  .uni-navbar--fixed {
    position: fixed;
    z-index: 998;
    /* #ifdef H5 */
    left: var(--window-left);
    right: var(--window-right);
    /* #endif */
    /* #ifndef H5 */
    left: 0;
    right: 0;
    /* #endif */
  
  }
  
  .uni-navbar--shadow {
    box-shadow: 0 1px 6px #ccc;
  }
  
  .uni-navbar--border {
    border-bottom-width: 1rpx;
    border-bottom-style: solid;
    border-bottom-color: #eee;
  }
  
  .uni-ellipsis-1 {
    overflow: hidden;
    /* #ifndef APP-NVUE */
    white-space: nowrap;
    text-overflow: ellipsis;
    /* #endif */
    /* #ifdef APP-NVUE */
    lines: 1;
    text-overflow: ellipsis;
    /* #endif */
  }
  
  // 暗主题配置
  .uni-dark {}
  </style>
  